<template>
  <div class="gaiinfo">
    <div class="top">
      <img
        src="@/assets/img/user/gai/left.png"
        alt=""
        @click="$router.go(-1)"
      />
      <div>
        <p>修改个人资料</p>
        <span>完成度30%</span>
      </div>
    </div>
    <div class="head">
      <h2>头像</h2>
      <div class="head-img">
        <img :src="userInfo.headurl" alt="" />
        <p><img src="@/assets/img/user/gai/jia.png" alt="" /></p>
      </div>
      <p>上传<span>人像清晰</span>的真实照片，更容易结交朋友</p>
    </div>
    <van-form @submit="onSubmit">
      <h1>基本资料(<span>3</span>/5)</h1>
      <van-field
        label="昵称"
        v-model.trim="user.username"
        name="username"
        right-icon="arrow"
        placeholder="请输入昵称"
        :border="false"
        input-align="right"
      />
      <van-field
        label="生日"
        v-model.trim="user.userbir"
        name="userbir"
        right-icon="arrow"
        placeholder="请输入生日"
        :border="false"
        input-align="right"
      />
      <van-field
        label="性别"
        v-model.trim="user.usersex"
        name="usersex"
        right-icon="arrow"
        placeholder="请输入你的性别"
        :border="false"
        input-align="right"
      />
      <van-field
        label="家乡"
        v-model.trim="user.usercity"
        name="usercity"
        right-icon="arrow"
        placeholder="你的家乡"
        :border="false"
        input-align="right"
      />
      <van-field
        label="职业"
        v-model.trim="user.userzy"
        name="userzy"
        right-icon="arrow"
        placeholder="从事什么职业"
        :border="false"
        input-align="right"
      />
      <h1>个人信息(<span>0</span>/2)</h1>
      <van-field
        label="声音"
        right-icon="arrow"
        placeholder="录制你的声音"
        :border="false"
        input-align="right"
      />
      <van-field
        label="签名"
        v-model.trim="user.userqm"
        name="userqm"
        right-icon="arrow"
        placeholder="介绍下你自己"
        :border="false"
        input-align="right"
      />
      <h1>其他信息(<span>0</span>/1)</h1>
      <van-field
        label="个人标签"
        right-icon="arrow"
        placeholder="选择个人标签"
        :border="false"
        input-align="right"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { postUserInfoSelect, postUpdateUserInfo } from "@/services";
export default {
  created() {
    // 获取个人信息
    postUserInfoSelect(localStorage.getItem("uids")).then((res) => {
      this.userInfo = res.data;
      this.user.username = this.userInfo.nickName;
      this.user.userbir = this.userInfo.birthday;
      this.user.userqm = this.userInfo.signature;
      this.user.usersex = this.userInfo.sex;
    });
  },
  data() {
    return {
      // 个人信息
      userInfo: [],
      user: {
        username: "",
        userbir: "",
        usercity: "",
        userzy: "",
        userqm: "",
        usersex: "",
      },
    };
  },
  methods: {
    // 保存
    onSubmit(values) {
      //   修改个人信息
      postUpdateUserInfo({
        birthday: values.userbir,
        uid: localStorage.getItem("uids"),
        signature: values.userqm,
        nickName: values.username,
        headurl: this.userInfo.headurl,
        sex: values.usersex,
      });
      console.log("submit", values);
    },
  },
};
</script>

<style lang="scss">
.gaiinfo {
  padding: 0 30px;
  .top {
    display: flex;
    align-items: center;
    margin-top: 44px;
    img {
      width: 23px;
      height: 36px;
    }
    div {
      text-align: center;
      margin-left: 223px;
      p {
        font-size: 30px;
        color: #ffffff;
      }
      span {
        font-size: 20px;
        color: #999999;
      }
    }
  }
  .head {
    margin-top: 66px;
    h2 {
      font-size: 28px;
      font-weight: 500;
      color: #ffffff;
    }
    .head-img {
      display: flex;
      margin-top: 31px;
      img {
        width: 161px;
        height: 161px;
      }
      p {
        margin: 0;
        margin-left: 8px;
        width: 161px;
        height: 161px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #131313;
        border-radius: 8px;
        img {
          width: 52px;
          height: 52px;
        }
      }
    }
    p {
      margin: 21px 0;
      font-size: 22px;
      font-weight: 500;
      color: #999999;
      span {
        color: #da863a;
      }
    }
  }
  .van-form {
    h1 {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      span {
        color: #63d197;
      }
    }
    .van-cell {
      background-color: #13131300;
      margin: 72px 0;
      ::-webkit-input-placeholder {
        color: #63d197;
      }
      :-moz-placeholder {
        color: #63d197;
      }
      ::-moz-placeholder {
        color: #63d197;
      }
      :-ms-input-placeholder {
        color: #63d197;
      }
      .van-cell__title {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
      .van-field__control--right {
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-right: 26px;
      }
      .van-icon {
        font-size: 26px;
        font-weight: 400;
        color: #999999;
      }
    }
    .van-button {
      height: 80px;
      font-size: 30px;
    }
  }
}
</style>
